// 页面切换效果
.left-enter.left-enter-active {
  -webkit-animation: pageFromRightToCenter 400ms forwards;
  animation: pageFromRightToCenter 400ms forwards;
  z-index: 2002;
}

.left-leave.left-leave-active {
  -webkit-animation: pageFromCenterToLeft 400ms forwards;
  animation: pageFromCenterToLeft 400ms forwards;
}

.right-enter.right-enter-active {
  -webkit-animation: pageFromLeftToCenter 400ms forwards;
  animation: pageFromLeftToCenter 400ms forwards;
}

.right-leave.right-leave-active {
  -webkit-animation: pageFromCenterToRight 400ms forwards;
  animation: pageFromCenterToRight 400ms forwards;
  z-index: 2002;
}
// 通用样式
.grid {
  overflow: hidden;
}

.page-from-right-to-center {
  -webkit-animation: pageFromRightToCenter 400ms forwards;
  animation: pageFromRightToCenter 400ms forwards;
  z-index: 2002;
}

.page-from-center-to-right {
  -webkit-animation: pageFromCenterToRight 400ms forwards;
  animation: pageFromCenterToRight 400ms forwards;
  z-index: 2002;
}
@-webkit-keyframes pageFromRightToCenter {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    opacity: 0.9;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes pageFromRightToCenter {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    opacity: 0.9;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes pageFromCenterToRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    opacity: 0.9;
  }
}
@keyframes pageFromCenterToRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    opacity: 0.9;
  }
}

.page-from-center-to-left {
  -webkit-animation: pageFromCenterToLeft 400ms forwards;
  animation: pageFromCenterToLeft 400ms forwards;
}

.page-from-left-to-center {
  -webkit-animation: pageFromLeftToCenter 400ms forwards;
  animation: pageFromLeftToCenter 400ms forwards;
}
@-webkit-keyframes pageFromCenterToLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0.5;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
  }
}
@keyframes pageFromCenterToLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0.5;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
  }
}
@-webkit-keyframes pageFromLeftToCenter {
  from {
    opacity: 0.5;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes pageFromLeftToCenter {
  from {
    opacity: 0.5;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
